<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>ATM当前状态</h2>
        </div>
      </div>
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">

   
              <Col span="5" class="mr-10">
              <queryData @ProvinceData="childByValue" ></queryData>
              </Col>
  
              机器编号：
                <Input class="mr-10" v-model="queryData.machineCode"  style="width:200px;" />
                <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
 
        </div>
      </Card>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import CurrentStatusApi from "@/api/base_sys/ATMstate.js";
  import moment from "moment";
  import {
    Message
  } from "iview";
  import queryData from "@/view/test/cityTestZj.vue"

  export default {
    components: {
      queryData
    },
    data() {
      return {
        queryForm: {
          cityCascade: {
            data: [{
              id: '',
              name: '请选择'
            }],
            provid: [],
            cityid: [],
            distid: [],
            strt: [],
            commid: [],
            comminid: [],

          },
        },
        // 弹出层数据
        modal: {
          system: {
            isShow: false,
            loading: true,
            type: "create", // create 新建，update 修改
            title: "新建",
            rules: {
              machineCode: [{
                required: true,
                message: "请填写机器编号",
                trigger: "blur"
              }],
              machineName: [{
                required: true,
                message: "请填写机器名称",
                trigger: "blur"
              }],
              paraKey: [{
                required: true,
                message: "请填写参数编号",
                trigger: "blur"
              }],
              paraValue: [{
                required: true,
                message: "请填写参数值",
                trigger: "blur"
              }]
            },
            formData: {
              // id: undefined,
              // name: "",
              // url: "",
              // state: ""
            }
          }
        },
        // 列表
        list: {
          loading: false,
          selections: [],
          // 列表展示数据
          tableData: [],
          // 表格表头
          columns: [{
              title: "机器编号",
              key: "machineCode",
              fixed: 'left',
              minWidth: 160,
              align: "center",
            },
            {
              title: "机器名称",
              key: "machineName",
              minWidth: 250,
              align: "center",
            },
            {
              title: "上行方式",
              key: "initupStatus",
              minWidth: 120,
              align: "center",
              render: (h, params) => {
                if (params.row.initupStatus == '0') {
                  return h('div', '自动');
                } else if (params.row.initupStatus == '1') {
                  return h('div', '按需');
                }
              }
            }, {
              title: "上行参数",
              key: "initupPara",
              minWidth: 120,
              align: "center",
            }, {
              title: "下行方式",
              key: "initdownStatus",
              minWidth: 120,
              align: "center",
              render: (h, params) => {
                if (params.row.initdownStatus == '0') {
                  return h('div', '自动');
                } else if (params.row.initdownStatus == '1') {
                  return h('div', '按需');
                }
              }
            }, {
              title: "下行参数",
              key: "initdownPara",
              minWidth: 120,
              align: "center",
            }, {
              title: "关重启",
              key: "restartStatus",
              minWidth:120,
              align: "center",
              render: (h, params) => {
                if (params.row.restartStatus == '00') {
                  return h('div', '无需重启');
                } else if (params.row.restartStatus == '01') {
                  return h('div', '重启');
                } else if (params.row.restartStatus == '02') {
                  return h('div', '关机');
                }
              }

            }, {
              title: "机器使用状态",
              key: "useStatus",
              minWidth: 140,
              align: "center",
              render: (h, params) => {
                if (params.row.useStatus == '00') {
                  return h('div', '空闲');
                } else if (params.row.useStatus == '01') {
                  return h('div', {
                    style: {
                      color: '#fbb217'
                    }
                  }, '正在使用');
                } else if (params.row.useStatus == '02') {
                  return h('div', {
                    style: {
                      color: '#ff4366'
                    }
                  }, '正在上袋');
                } else if (params.row.useStatus == '03') {
                  return h('div', {
                    style: {
                      color: '#01a1ff'
                    }
                  }, '正在刷卡');
                }
              }

            }, {
              title: "机器状态",
              key: "devStatus",
              minWidth: 120,
              align: "center",
              render: (h, params) => {
                if (params.row.devStatus == '00') {
                  return h('div', '正常');
                } else if (params.row.devStatus == '01') {
                  return h('div', {
                    style: {
                      color: '#fbb217'
                    }
                  }, '电机故障');
                }
              }

            }, {
              title: "机器门状态",
              key: "doorStatus",
              minWidth: 130,
              align: "center",
              render: (h, params) => {
                if (params.row.doorStatus == '00') {
                  return h('div', '门关');
                } else if (params.row.doorStatus == '01') {
                  return h('div', {
                      style: {
                        color: '#fbb217'
                      }
                    },
                    '门开');
                }
              }

            }, {
              title: "2G信号强度",
              minWidth: 130,
              align: "center",
              key: "simSignal",
            }, {
              title: "运行时间(0.1小时)",
              key: "runTime",
              minWidth: 180,
              align: "center",
            }, {
              title: "断网时间(分钟)",
              key: "lostConnecttime",
              minWidth: 150,
              align: "center",
            }, {
              title: "本地数据",
              key: "localDataNum",
              minWidth: 130,
              align: "center",
            }, {
              title: "APP指令",
              key: "appOt",
              minWidth: 130,
              align: "center",
              render: (h, params) => {
                if (params.row.appOt == '00') {
                  return h('div', '00无指令');
                } else if (params.row.appOt == '01') {
                  return h('div', '01刷卡领取');
                }
              }

            }, {
              title: "对应流水",
              key: "appotSeq",
              minWidth: 120,
              align: "center",
            }, {
              title: "对应卡号",
              key: "appotUsercardno",
              minWidth: 150,
              align: "center",
            }, {
              title: "最近连接时间",
              key: "lastTime",
              minWidth: 180,
              align: "center",
            },
            {
              title: "最近上袋时间",
              key: "lastUpgoodstime",
              minWidth: 180,
              align: "center",
            },
          ]
        },
        // 页面查询数据
        queryData: {
          limit: 10,
          page: 1,
          totalRecord: 0,
        }
      }
    },
    methods: {
      click() {
        let getCities = this.value;
      },
      // 获取列表
      getTableData() {
        const that = this;
        that.queryData.totalRecord = undefined;
        CurrentStatusApi.getPageList(that.queryData)
          .then(res => {
            that.list.tableData = res.data.list;
            that.queryData.totalRecord = res.data.totalRecord;
            that.queryData.limit = res.data.pageSize;
          })
          .catch(error => {
            Message.error(error);
          });
      },
      //城市级联
      childByValue(newObject) {
        this.queryData.provid = newObject.provid;
        this.queryData.commid = newObject.commid;
        this.queryData.cityid = newObject.cityid;
        this.queryData.comminid = newObject.comminid;
        this.queryData.distid = newObject.distid;
        this.queryData.strt = newObject.strt;
      },
      //查询
      inQuire() {
				this.queryData.page=1;
        this.getTableData();
      },
      //每页显示记录数变更
      onPageSizeChange(pageSize) {
        this.queryData.limit = pageSize;
        this.getTableData();
      },
      // 换页
      changePage(page) {
        this.queryData.page = page;
        this.getTableData();
      },
    },
    created() {
      this.getTableData();
    }
  };
</script>
